<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>旋转</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				perspective: 1000px;
				/*	perspective-origin: 50% 50%;*/
				position: relative;
				width: 100%;
				height: 100vh;
			}
			
			div {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -100px;
				width: 200px;
				height: 200px;
			}
			
			.box div[class^="box"] {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -100px;
				opacity: 0.5;
			}
			
			.box {
				transform-style: preserve-3d;
				transform: rotateY(45deg);
				background: paleturquoise;
				text-align: center;
				line-height: 200px;
				animation: box 3s linear infinite;
				/*x y z0*/
				transform-origin: center center 1;
			}
			
			@keyframes box {
				from {
					transform: rotate3d(1, 1, 1, 0)
				}
				to {
					transform: rotate3d(1, 1, 1, 360deg)
				}
			}
			
			.box1 {
				background-color: yellow;
				transform: translateZ(100px);
				transition: all 3s linear;
			}
			.box:hover .box1{
				transform: translateZ(200px);
			}
			.box2 {
				background-color: black;
				transform: translateZ(-100px);
				transition: all 3s linear;
			}
			.box:hover .box2{
				transform: translateZ(-200px);
			}
			.box3 {
				background-color: red;
				transform: translateX(100px) rotateY(90deg);
				transition: all 3s linear;
			}
			.box:hover .box3{
				transform: translateX(200px) rotateY(90deg);
			}
			.box4 {
				background-color:blue;
				transform: translateX(-100px) rotateY(-90deg);
				transition: all 3s linear;
			}
			.box:hover .box4{
				transform: translateX(-200px) rotateY(-90deg);
			}
			.box5 {
				background-color: orange;
				transform: translateY(-100px) rotateX(90deg);
				transition: all 3s linear;
			}
			.box:hover .box5{
				transform: translateY(-200px) rotateX(90deg);
			}
			.box6 {
				background-color: pink;
				transform: translateY(100px) rotateX(90deg);
				transition: all 3s linear;
			}
			.box:hover .box6{
				transform: translateY(200px) rotateX(90deg);
			}
		</style>

	</head>

	<body>
		<div class="box">
			3D空间
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
			<div class="box5"></div>
			<div class="box6"></div>

		</div>

	</body>

</html>